import {
  List,
  Button,
  Sheet,
  Scrollable,
  ChoiceList,
  Text,
  Icon,
  Divider,
} from "@shopify/polaris";
import {
  MobileCancelMajor,
  ChevronRightMinor,
  CategoriesMajor,
  FirstVisitMajor,
  HeartMajor,
  MarketingMajor,
  CartMajor,
  OrdersMinor,
  LocationMajor,
  ClipboardMinor,
  TabletMajor,
} from "@shopify/polaris-icons";
import { useState, useCallback } from "react";

import styled from "./index.module.less";
interface Props {
  setSheetActive: (BL: any) => void;
  sheetActive: boolean;
  setValue: (value: any) => void;
}

function SheetExample({ setSheetActive, sheetActive, setValue }: Props) {
  const toggleSheetActive = useCallback(
    () => setSheetActive((sheetActive: boolean) => !sheetActive),
    []
  );

  //LEFT bg
  const [number, setNumber] = useState(1);

  const mock = `
      <span className="M88_h">email_subscription_status</span><span className="undefined"> </span>
      <span className="CC3oV">=</span>
      <span className="undefined"> </span>
      <span className="r4aR4">'</span>
      <span className="r4aR4">SUBSCRIBED</span>
      <span className="r4aR4">'</span>
      <span className="undefined"> </span>
      <span className="GgIbu">AND</span>
      <span className="undefined"> </span>
      <span className="undefined dNkfx">(</span>
      <span className="M88_h">shopify_email.opened</span>
      <span className="kqXgk dNkfx">(</span>
      <span className="Ur8zH">count_at_least</span>
      <span className="r4aR4">:</span>
      <span className="undefined"> </span>
      <span className="r4aR4">3</span>
      <span className="r4aR4">,</span>
      <span className="undefined"> </span>
      <span className="Ur8zH">since</span>
      <span className="r4aR4">:</span>
      <span className="undefined"> </span>
      <span className="ftM0C">-90d</span>
      <span className="kqXgk dNkfx">)</span>
      <span className="undefined"> </span>
      <span className="CC3oV">=</span>
      <span className="undefined"> </span>
      <span className="r4aR4">true</span>
      <span className="undefined"> </span>
      <span className="GgIbu">OR</span>
      <span className="undefined"> </span>
      <span className="M88_h">shopify_email.clicked</span>
      <span className="kqXgk dNkfx">(</span>
      <span className="Ur8zH">count_at_least</span>
      <span className="r4aR4">:</span>
      <span className="r4aR4">3</span>
      <span className="r4aR4">,</span>
      <span className="undefined"> </span>
      <span className="Ur8zH">since</span>
      <span className="r4aR4">:</span>
      <span className="undefined"> </span>
      <span className="ftM0C">-90d</span>
      <span className="kqXgk dNkfx">)</span>
      <span className="undefined"> </span>
      <span className="CC3oV">=</span>
      <span className="undefined"> </span>
      <span className="r4aR4">true</span>
      <span className="undefined dNkfx">)</span>
      <span className="undefined"> </span>
      <span className="GgIbu">AND</span>
      <span className="undefined"> </span>
      <span className="M88_h">number_of_orders</span>
      <span className="undefined"> </span>
      <span className="CC3oV">=</span>
      <span className="undefined"> </span>
      <span className="r4aR4">0</span>
  `;

  return (
    <Sheet
      open={sheetActive}
      onClose={toggleSheetActive}
      accessibilityLabel="Manage sales channels"
    >
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          height: "100%",
        }}
      >
        <div
          style={{
            borderBottom: "1px solid #DFE3E8",
            padding: "1rem",
            height: "86px",
          }}
        >
          <div
            style={{
              alignItems: "center",
              display: "flex",
              justifyContent: "space-between",
              paddingBottom: "5px",
              width: "100%",
            }}
          >
            <div className={styled.title}>模板</div>
            <Button
              accessibilityLabel="Cancel"
              icon={MobileCancelMajor}
              onClick={toggleSheetActive}
              plain
            />
          </div>
          <div className={styled.titlefooter}>使用可自定义的模板创建新细分</div>
        </div>
        <div className={styled.MIDDLE}>
          <div className={styled.MDLEFT}>
            <div>
              <div
                onClick={() => {
                  setNumber(1);
                }}
                className={
                  styled.MDLEFTTOP + " " + (number == 1 ? styled.ActiveBG : "")
                }
              >
                <div className={styled.MDLEFTHEADER}>
                  <div>
                    <Icon source={CategoriesMajor}></Icon>
                  </div>
                  <div className={styled.wenzi}>全部</div>
                </div>
                <div>
                  <Icon source={ChevronRightMinor}></Icon>
                </div>
              </div>
              <div
                onClick={() => {
                  setNumber(2);
                }}
                className={
                  styled.MDLEFTTOP + " " + (number == 2 ? styled.ActiveBG : "")
                }
              >
                <div className={styled.MDLEFTHEADER}>
                  <div>
                    <Icon source={FirstVisitMajor}></Icon>
                  </div>
                  <div className={styled.wenzi}>吸引首次下单客户</div>
                </div>
                <div>
                  <Icon source={ChevronRightMinor}></Icon>
                </div>
              </div>
              <div
                onClick={() => {
                  setNumber(3);
                }}
                className={
                  styled.MDLEFTTOP + " " + (number == 3 ? styled.ActiveBG : "")
                }
              >
                <div className={styled.MDLEFTHEADER}>
                  <div>
                    <Icon source={HeartMajor}></Icon>
                  </div>
                  <div className={styled.wenzi}>吸引高额消费客户</div>
                </div>
                <div>
                  <Icon source={ChevronRightMinor}></Icon>
                </div>
              </div>
              <div
                onClick={() => {
                  setNumber(4);
                }}
                className={
                  styled.MDLEFTTOP + " " + (number == 4 ? styled.ActiveBG : "")
                }
              >
                <div className={styled.MDLEFTHEADER}>
                  <div>
                    <Icon source={MarketingMajor}></Icon>
                  </div>
                  <div className={styled.wenzi}>重新吸引客户</div>
                </div>
                <div>
                  <Icon source={ChevronRightMinor}></Icon>
                </div>
              </div>
              <div
                onClick={() => {
                  setNumber(5);
                }}
                className={
                  styled.MDLEFTTOP + " " + (number == 5 ? styled.ActiveBG : "")
                }
              >
                <div className={styled.MDLEFTHEADER}>
                  <div>
                    <Icon source={CartMajor}></Icon>
                  </div>
                  <div className={styled.wenzi}>目标店面行为</div>
                </div>
                <div>
                  <Icon source={ChevronRightMinor}></Icon>
                </div>
              </div>
              <div
                onClick={() => {
                  setNumber(6);
                }}
                className={
                  styled.MDLEFTTOP + " " + (number == 6 ? styled.ActiveBG : "")
                }
              >
                <div className={styled.MDLEFTHEADER}>
                  <div>
                    <Icon source={OrdersMinor}></Icon>
                  </div>
                  <div className={styled.wenzi}>针对购买行为</div>
                </div>
                <div>
                  <Icon source={ChevronRightMinor}></Icon>
                </div>
              </div>
              <div
                onClick={() => {
                  setNumber(7);
                }}
                className={
                  styled.MDLEFTTOP + " " + (number == 7 ? styled.ActiveBG : "")
                }
              >
                <div className={styled.MDLEFTHEADER}>
                  <div>
                    <Icon source={LocationMajor}></Icon>
                  </div>
                  <div className={styled.wenzi}>针对待定地点</div>
                </div>
                <div>
                  <Icon source={ChevronRightMinor}></Icon>
                </div>
              </div>
            </div>
          </div>
          <div className={styled.MDRIGHT}>
            {(number == 1 || number == 2) && (
              <div className={styled.moban}>
                <div className={styled.topicon}>
                  <div className={styled.padding8}>
                    <Icon source={FirstVisitMajor}></Icon>
                  </div>
                </div>
                <div className={styled.midwenzi}>
                  近期经常打开或点击电子邮件但未下单的订阅者
                </div>
                <div className={styled.midwenzis}>
                  为近期经常打开或点击电子邮件的订阅者提供折扣以将其转化为新客户。
                </div>
                <div>
                  <pre className="pre">
                    <span className="M88_h">email_subscription_status</span>
                    <span className="undefined"> </span>
                    <span className="CC3oV">=</span>
                    <span className="undefined"> </span>
                    <span className="r4aR4">'</span>
                    <span className="r4aR4">SUBSCRIBED</span>
                    <span className="r4aR4">'</span>
                    <span className="undefined"> </span>
                    <span className="GgIbu">AND</span>
                    <span className="undefined"> </span>
                    <span className="undefined dNkfx">(</span>
                    <span className="M88_h">shopify_email.opened</span>
                    <span className="kqXgk dNkfx">(</span>
                    <span className="Ur8zH">count_at_least</span>
                    <span className="r4aR4">:</span>
                    <span className="undefined"> </span>
                    <span className="r4aR4">3</span>
                    <span className="r4aR4">,</span>
                    <span className="undefined"> </span>
                    <span className="Ur8zH">since</span>
                    <span className="r4aR4">:</span>
                    <span className="undefined"> </span>
                    <span className="ftM0C">-90d</span>
                    <span className="kqXgk dNkfx">)</span>
                    <span className="undefined"> </span>
                    <span className="CC3oV">=</span>
                    <span className="undefined"> </span>
                    <span className="r4aR4">true</span>
                    <span className="undefined"> </span>
                    <span className="GgIbu">OR</span>
                    <span className="undefined"> </span>
                    <span className="M88_h">shopify_email.clicked</span>
                    <span className="kqXgk dNkfx">(</span>
                    <span className="Ur8zH">count_at_least</span>
                    <span className="r4aR4">:</span>
                    <span className="r4aR4">3</span>
                    <span className="r4aR4">,</span>
                    <span className="undefined"> </span>
                    <span className="Ur8zH">since</span>
                    <span className="r4aR4">:</span>
                    <span className="undefined"> </span>
                    <span className="ftM0C">-90d</span>
                    <span className="kqXgk dNkfx">)</span>
                    <span className="undefined"> </span>
                    <span className="CC3oV">=</span>
                    <span className="undefined"> </span>
                    <span className="r4aR4">true</span>
                    <span className="undefined dNkfx">)</span>
                    <span className="undefined"> </span>
                    <span className="GgIbu">AND</span>
                    <span className="undefined"> </span>
                    <span className="M88_h">number_of_orders</span>
                    <span className="undefined"> </span>
                    <span className="CC3oV">=</span>
                    <span className="undefined"> </span>
                    <span className="r4aR4">0</span>
                  </pre>
                </div>
                <div className={styled.MBBTN}>
                  <div>
                    <Button
                      size="slim"
                      monochrome
                      onClick={() => {
                        setValue(mock);
                      }}
                    >
                      使用此模板
                    </Button>
                  </div>
                </div>
              </div>
            )}
            {(number == 1 || number == 2) && (
              <div className={styled.moban}>
                <div className={styled.topicon}>
                  <div className={styled.padding8}>
                    <Icon source={ClipboardMinor}></Icon>
                  </div>
                </div>
                <div className={styled.midwenzi}>
                  选择接受电子邮件营销的首次下单客户
                </div>
                <div className={styled.midwenzis}>
                  在客户首次下单后，向其提供产品优惠来推动再次下单。
                </div>
                <div>
                  <pre className="pre">
                    <span className="M88_h">number_of_orders</span>
                    <span className="undefined"> </span>
                    <span className="CC3oV">=</span>
                    <span className="undefined"> </span>
                    <span className="r4aR4">1</span>
                    <span className="undefined"> </span>
                    <span className="GgIbu">AND</span>
                    <span className="undefined"> </span>
                    <span className="M88_h">email_subscription_status</span>
                    <span className="undefined"> </span>
                    <span className="CC3oV">=</span>
                    <span className="undefined"> </span>
                    <span className="r4aR4">'</span>
                    <span className="r4aR4">SUBSCRIBED</span>
                    <span className="r4aR4">'</span>
                  </pre>
                </div>
                <div className={styled.MBBTN}>
                  <div>
                    <Button size="slim" monochrome>
                      使用此模板
                    </Button>
                  </div>
                </div>
              </div>
            )}
            {(number == 1 || number == 3) && (
              <div className={styled.moban}>
                <div className={styled.topicon}>
                  <div className={styled.padding8}>
                    <Icon source={TabletMajor}></Icon>
                  </div>
                </div>
                <div className={styled.midwenzi}>
                  近期单笔订单消费金额较高的客户
                </div>
                <div className={styled.midwenzis}>
                  向过去 90
                  天内订单消费金额较高的客户交叉销售同一产品系列中的其他产品。
                </div>
                <div>
                  <pre className="pre">
                    <span className="M88_h">orders_placed</span>
                    <span className="undefined dNkfx">(</span>
                    <span className="Ur8zH">amount_at_least</span>
                    <span className="r4aR4">:</span>
                    <span className="undefined"> </span>
                    <span className="r4aR4">500</span>
                    <span className="r4aR4">,</span>
                    <span className="undefined"> </span>
                    <span className="Ur8zH">since</span>
                    <span className="r4aR4">:</span>
                    <span className="undefined"> </span>
                    <span className="ftM0C">-90d</span>
                    <span className="undefined dNkfx">)</span>
                    <span className="undefined"> </span>
                    <span className="CC3oV">=</span>
                    <span className="undefined"> </span>
                    <span className="r4aR4">true</span>
                    <span className="undefined"> </span>
                    <span className="GgIbu">AND</span>
                    <span className="undefined"> </span>
                    <span className="M88_h">products_purchased</span>
                    <span className="undefined dNkfx">(</span>
                    <span className="Ur8zH">id</span>
                    <span className="r4aR4">:</span>
                    <span className="undefined"> </span>
                    <span className="kqXgk dNkfx">(</span>
                    <span className="undefined">product_id</span>
                    <span className="kqXgk dNkfx">)</span>
                    <span className="undefined dNkfx">)</span>
                    <span className="undefined"> </span>
                    <span className="CC3oV">=</span>
                    <span className="undefined"> </span>
                    <span className="r4aR4">true</span>
                  </pre>
                </div>
                <div className={styled.MBBTN}>
                  <div>
                    <Button size="slim" monochrome>
                      使用此模板
                    </Button>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
        <div
          style={{
            alignItems: "center",
            borderTop: "1px solid #DFE3E8",
            display: "flex",
            justifyContent: "space-between",
            padding: "1rem",
            width: "100%",
            height: "65px",
          }}
        >
          <div></div>
          <Button primary onClick={toggleSheetActive} size="slim">
            Close
          </Button>
        </div>
      </div>
    </Sheet>
  );
}

export default SheetExample;
